<template>
  <div>地图演示</div>
  <div>{{ mapError }}</div>
  <div class="map-container" id="amap-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const mapError = ref({})

const loadMap = () => {
  AMapLoader.load({
    key: '3af3708fbe89c57f43eb8e1a7e9b37fe', //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI，缺省不加载
      version: '1.1', //AMapUI 版本
      plugins: ['overlay/SimpleMarker'], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca， 缺省不加载
      version: '2.0', //Loca 版本
    },
  })
    .then((AMap) => {
      const map = new AMap.Map('amap-container') //"container"为 <div> 容器的 id
      map.addControl(new AMap.ToolBar({ position: 'LT' }))

      map.addControl(new AMap.Scale()) //添加比例尺组件到地图实例上

      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
        timeout: 10000, // 设置定位超时时间，默认：无穷大
        offset: [10, 20], // 定位按钮的停靠位置的偏移量
        zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        position: 'RB', //  定位按钮的排放位置,  RB表示右下
      })
      map.addControl(geolocation) //@ts-expect-error @typescript-eslint/no-explicit-any
      geolocation.getCurrentPosition((s, r) => {
        if (s == 'complete') {
          map.setCenter(r.position)

          const marker = new AMap.Marker({
            position: r.position,
          })
          map.add(marker)

          mapError.value = {}
          console.log('定位错误:', s)
          mapError.value = r
        }
      })
    })
    .catch((e) => {
      console.error(e) //加载错误提示
    })
}

const map = ref(null)

onMounted(() => {
  loadMap()
})

onUnmounted(() => {
  //@ts-expect-error @typescript-eslint/no-explicit-any
  map.value?.destroy()
})
</script>

<style scoped>
.map-container {
  height: 90vh;
  width: 90%;
  margin: 5px auto;
}
</style>
